import { h, fragment } from '../../../dist/esm';
import { render, Component, ObjectProps, CSSStyle, WebComponents, useContext } from '../../../dist/esm';
import jsdom from 'jsdom';

const dom = new jsdom.JSDOM();

// 自定义 WebComponent 组件
class MyWebComponent extends dom.window.HTMLElement {
	constructor() {
		super();
		this.attachShadow({ mode: 'open' });
		this.shadowRoot?.append(<h2>MyWebComponent</h2>);
	}
	connectedCallback() {
		console.log('MyWebComponent connectedCallback');
		this.shadowRoot?.append(<div>connectedCallback: {this.childNodes}</div>);
	}
}

type MyProps = ObjectProps<MyComponent> & {
	style?: CSSStyle;
};

class MyComponent extends Component<MyProps> {
	render() {
		return (
			<div style={this.props.style}>
				<h2>MyComponent</h2>
				Text ...
				{this.props.children}
			</div>
		);
	}
}

useContext(dom.window, () => {
	const ComponentWrapper = WebComponents.register(MyWebComponent, 'my-web-component');

	render(() => {
		return (
			<>
				<div>
					<h2>SSR test</h2>
				</div>
				<MyComponent>Component children part</MyComponent>
				<ComponentWrapper style={{ fontSize: '20pt', color: 'green' }}>
					{[1, 2, 3, 4].map((i) => `text${i}`).join(',')}
				</ComponentWrapper>
				<my-web-component style="font-size: 40pt">{[1, 2, 3, 4].map((i) => `text${i}`).join(',')}</my-web-component>
			</>
		);
	});
});
console.log(dom.serialize());
